<template>
    <div class="pop-mappoint-selection">
        <el-dialog title="地图选点" :visible.sync="dialogVisible" width="800px">
            <div class="content-box">
                <baidu-map
                    class="bm-view"
                    :center="center"
                    :zoom="zoom"
                    @ready="handler"
					@click="addMap"
                >
                    <bm-local-search
                        :keyword="keyword"
                        :auto-viewport="true"
                        :location="location"
                        :selectFirstResult="true"
                        :panel="false"
                    ></bm-local-search>
                </baidu-map>
                <div class="search-box">
                    <el-input
                        v-model="search_input"
                        class="input-w"
                        clearable
                        placeholder="请输入关键字"
                        @clear="searchFun"
                    ></el-input>
                    <!-- <el-autocomplete
                        class="input-w"
                        v-model="search_input"
                        :fetch-suggestions="querySearch"
                        placeholder="请输入"
                        maxlegth="10"
                        @select="handleSelect"
                    ></el-autocomplete> -->
                    <el-button type="primary" @click="searchFun"
                        >搜索</el-button
                    >
                </div>
            </div>
            <div class="info-box">
                <el-input
                    v-model="roughly_address"
                    class="input-wd"
                    :disabled="true"
                ></el-input>
                <el-input
                    v-model="detailed_address"
                    placeholder="详细地址"
                    class="input-w"
                ></el-input>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="popAddress">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import BaiduMap from 'vue-baidu-map'
// import xxx from '@/components/comm/xxx.vue';
export default {
    props: [],
    components: {},
    computed: {},
    data() {
        return {
            dialogVisible: false,
            search_input: "", //搜索内容
            roughly_address: "", //地图地址
            detailed_address: "", //详细地址
            restaurants: [], //建议搜索
            center: { lng: 0, lat: 0 },
            zoom: 3,
            location: "广东",
            keyword: "",
			BMap: '', 
			map: '',
			mapCenter: {},
			addObj: {
				province: '',
				city: '',
				district: '',
			},
			polyline: { // 折线的对象
				editing: false,
				paths: []
			},
        };
    },
    created() {},
    mounted() {
        window.addEventListener("mousewheel", this.handleScroll, true) ||
        window.addEventListener("DOMMouseScroll", this.handleScroll, false);
    },
    methods: {
		popAddress () {
			let text = this.roughly_address+this.detailed_address;
			this.dialogVisible = false;
			this.$emit('bmapText',text)
		},
		makerCenter(point) {
			if (this.map) {
			  this.map.clearOverlays();
			  //var marker = new this.BMap.Marker(point);
			  this.map.addOverlay(new this.BMap.Marker(point));
			  //跳动的动画
			  // eslint-disable-next-line no-undef
			  //marker.setAnimation(BMAP_ANIMATION_BOUNCE);
			  this.mapCenter.lng = point.lng;
			  this.mapCenter.lat = point.lat;
			  this.mapZoom = 17;
			  this.mapCenter= { lng: point.lng, lat: point.lat }
			}
		},
		addMap (e) {
			this.getLocationFun(e.point.lng,e.point.lat)
			this.paintPolyline(e);
		},
        initData() {
            this.dialogVisible = true;
        },
        searchFun() {
            this.keyword = this.search_input;
        },
		 // 点击 点击标注图标后会触发此事件
		paintPolyline(item) {
			var { point } = item;
			this.flag = true;
			this.makerCenter(point);
			if (!this.polyline.editing) {
			  return
			}
			const {paths} = this.polyline
			!paths.length && paths.push([])
			paths[paths.length - 1].push(item.point)
		},
        handler({ BMap, map }) {
			this.BMap = BMap;
			this.map = map;
            console.log(BMap, map,'2131312313213131');
			// 创建地理编码实例      
            this.center.lng = 116.404;
            this.center.lat = 39.915;
            this.zoom = 15;
			
        },
		// 经纬逆向解析 
		getLocationFun (lng,lat) {
			var myGeo = new this.BMap.Geocoder();
			var pt = new this.BMap.Point(lng,lat);
			myGeo.getLocation(pt,(result)=>{
				let addressComponents = result.addressComponents
				this.roughly_address = `${addressComponents.province}${addressComponents.city}${addressComponents.district}`
			    this.detailed_address = `${addressComponents.street}${addressComponents.streetNumber}`
				// that.BAddress = result.address; //获取到当前定位的详细地址信息
			});
		},
		
        querySearch(queryString, cb) {
            var restaurants = this.restaurants;
            var results = queryString
                ? restaurants.filter(this.createFilter(queryString))
                : restaurants;
            cb(results);
        },
        createFilter(queryString) {
            return (restaurant) => {
                return (
                    restaurant.value
                        .toLowerCase()
                        .indexOf(queryString.toLowerCase()) === 0
                );
            };
        },
        // 选中的建议搜索
        handleSelect(item) {
            console.log(item);
        },

        //判断滚动方向
        handleScroll(e) {
            if (!this.dialogVisible) return;
            let direction = e.deltaY > 0 ? "down" : "up";
            if (direction === "down") {
                this.zoom--;
                if (this.zoom < 1) {
                    this.zoom = 1;
                }
            } else {
                this.zoom++;
                if (this.zoom > 20) {
                    this.zoom = 20;
                }
            }
        },
    },
};
</script>

<style lang="scss" scoped >
.bm-view {
    width: 100%;
    height: 400px;
}

// 去掉文字那行，添加CSS即可
::v-deep.BMap_cpyCtrl {
    display: none;
}
// 去掉地图那行，添加CSS即可
::v-deep.anchorBL {
    display: none;
}

.pop-mappoint-selection {
    .dialog-footer {
        text-align: center;
    }
    .content-box {
        height: 400px;
        border: 1px solid #dcdfe6;
        position: relative;
        ::v-deep.search-box {
            width: 400px;
            position: absolute;
            left: calc(50% - 200px);
            top: 50px;
            .input-w {
                width: 330px;
            }
            .el-input__inner {
                border-right: none;
                border-radius: 4px 0 0 4px;
            }
            .el-button {
                border-radius: 0 4px 4px 0;
            }
        }
    }
    .info-box {
        margin-top: 10px;
        .input-wd {
            width: 200px;
            margin-right: 10px;
        }
        .input-w {
            width: calc(100% - 210px);
        }
    }
}
</style>
